<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">

    <link rel="stylesheet" href="./jquery-emoji/lib/css/jquery.mCustomScrollbar.min.css" />
    <!--the css for this plugin-->
    <link rel="stylesheet" href="./jquery-emoji/src/css/jquery.emoji.css" />

</head>

<body>
    <div class="container">
        <div class="login-container">
            <h5>需要启动node ./app.js 来提供接口支持</h5>
            <h5>进入【闲聊群】聊天室请输入用户名称，选择头像</h5>
            <div class="loginDiv">

                <div class="inputDiv">
                    <input type="text" id="username" placeholder="请输入用户姓名" autocomplete="off">
                </div>

                <p class="chooseavatar">选择头像</p>
                <div class="avatarUl">
                    <img src="./images/01.png" alt="">
                    <img src="./images/02.png" alt="">
                    <img src="./images/03.png" alt="">
                    <img src="./images/04.png" alt="">
                    <img src="./images/05.png" alt="">
                    <img src="./images/06.png" alt="">
                    <img src="./images/07.png" alt="">
                    <img src="./images/08.png" alt="">
                    <img src="./images/09.png" alt="">
                </div>
                <div class="joinBtn">
                    <button id="joinBtn">进入聊天室</button>
                </div>
            </div>
        </div>


        <div class="chat-container">
            <div class="chat-title">群聊【 <span class="countUser"> </span> 】人</div>
            <div class="chat-content">
                <div class="userDiv">
                    <div class="myInfo">
                    </div>
                    <div class="otherUserInfo">

                    </div>
                </div>
                <div class="chatDiv">
                </div>
            </div>
            <div>
                <div class="label">
                    <form id="fileForm" style="display: none;"> <input type="file" id="file" style="display: none;"> </form>
                    <span id="face">表情</span> &nbsp;&nbsp;
                    <span onclick="chooseFile()">图片</span>
                </div>
                <div class="chat-input">
                    <div id="inputVal" cols="30" rows="2" placeholder="请输入聊天内容" contenteditable></div>
                    <button id="sendContentBtn">发送</button>
                </div>

            </div>
        </div>
    </div>

    <script src="./jquery-emoji/lib/script/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>

    <script src="./jquery-emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>

    <!--the js for jquery.mCustomScrollbar-->
    <script src="./jquery-emoji/lib//script/jquery.mCustomScrollbar.min.js"></script>
    <!--the js for this plugin-->
    <script src="./jquery-emoji/src/js/jquery.emoji.js"></script>

    <script>
        var avatar = '';
        var username = ''

        const TYPE_ON = 0;
        const TYPE_CHAT = 1;
        const TYPE_LEAVE = 2;
        const TYPE_SOME = 3; // 登录用户名重复了


        // 选择头像
        $('.avatarUl').on('click', 'img', function() {
            // console.log(this);
            $(this).addClass('imgBorder').siblings().removeClass('imgBorder')
            avatar = $(this).attr('src')
        })

        const socket = io('http://localhost:3000');
        socket.on('connect', () => {
            // console.log('connected');
        });


        // 登录
        $('#joinBtn').on('click', function() {
            username = $('#username').val().trim();
            if (!username) return alert('请输入用户名称')

            // console.log(avatar);
            if (!avatar) return alert('请选择用户头像')
                // 向服务器发送消息,发送当前用户登录信息
            socket.emit('sendLogin', {
                username: username,
                avatar: avatar
            })
            $('#username').val('')
        })


        // 新用户登录成功，在内容区显示 提示
        socket.on('loginSuccess', data => {
            if (data.type === TYPE_SOME) {
                return alert(data.msg)
            } else {
                // 登录成功后需要显示聊天框；隐藏登录输入框
                $(".login-container").css('display', 'none')
                $(".chat-container").css('display', 'block')
                $('.chatDiv').append($(`<div class="on">${data.msg}</div>`))

                // 将页面滚动到底部
                $('.chat-container .chatDiv div:last').get(0).scrollIntoView(false);
            }

        })

        //新用户上线 进行聊天人员的更新
        socket.on('addUser', data => {
            // console.log(data);
            $('.countUser').text(data.length)

            $('.otherUserInfo').html('')

            // console.log(username);
            data.forEach(item => {
                if (item.username === username) {
                    $('.myInfo').html(`<img src="${item.avatar}" alt=""> <span class="username"> 我 </span>`)
                } else {
                    let div = document.createElement('div');
                    div.innerHTML = (` <img src="${item.avatar}" alt=""><span class="username">  ${item.username} </span>`)
                    $('.otherUserInfo').append(div)
                }
            })

        })

        //发送聊天内容
        $('#sendContentBtn').on('click', function() {
            let inputVal = $('#inputVal').html();
            // console.log(inputVal);
            if (!inputVal.trim()) return;

            // 发送消息到服务端
            socket.emit('sendContent', inputVal)

            $('#inputVal').html("")
        })


        // 注册服务器返回的聊天信息，添加到聊天内容区域
        socket.on('sendContendResponse', data => {
            // console.log(data);
            if (data.username === username) {
                $('.chatDiv').append($(`
                            <div class="mychat">
                                <div class="left">
                                    <pre class="msg">${data.msg}</pre>
                                </div>
                                <div class="right">
                                    <img class="avatar"                                    src="${data.avatar}" alt="">
                                </div>
                            </div>`))
            } else {
                $('.chatDiv').append($(`
                            <div class="ortheruserchat">
                                <div class="left">
                                    <img class="avatar" src="${data.avatar}" alt="">
                                </div>
                                <div class="right">
                                    <div class="username">
                                        ${data.username}
                                    </div>
                                    <pre class="msg">${data.msg}</pre>
                                </div>
                            </div>`))

            }

            // 将页面滚动到底部 -- 有动画效果
            $(".chatDiv").animate({
                scrollTop: $(".chatDiv")[0].scrollHeight
            })

        })

        // 图片发送后的响应--渲染列表
        socket.on('sendImgResponse', data => {
            // console.log(data);
            if (data.username === username) {
                $('.chatDiv').append($(`
                    <div class="mychat">
                        <div class="left">
                            <img class="dataImg" src="${data.img}" />
                        </div>
                        <div class="right">
                            <img  class="avatar" src="${data.avatar}" alt="">
                        </div>
                    </div>`))
            } else {
                $('.chatDiv').append($(`
                <div class="ortheruserchat">
                    <div class="left">
                        <img  class="avatar" src="${data.avatar}" alt="">
                    </div>
                    <div class="right">
                        <div class="username">
                            ${data.username}
                        </div>
                        <img class="dataImg" src="${data.img}" />
                    </div>
                </div>`))
            }

            // 当最后一张图片加载完成后进行滚动到可视化区域
            $('.chatDiv .dataImg').on('load', function() {
                // 有动画效果的父元素滚动到页面最底部        
                $(".chatDiv").animate({
                    scrollTop: $(".chatDiv")[0].scrollHeight
                })
            })
        })

        // 用户离线 需要将消息渲染在聊天区域中
        socket.on('leaveEvent', data => {
            $('.chatDiv').append($(`<div class="leave">${data.msg}</div>`))

            // 将页面滚动到底部 : false: 元素底部与视图底部对齐 -- 没有动画效果
            // $('.chat-container .chatDiv div:last').get(0).scrollIntoView(false);
            // 有动画效果
            $(".chatDiv").animate({
                scrollTop: $(".chatDiv")[0].scrollHeight
            })
        })

        //点击图片，进行图片选择
        function chooseFile() {
            $('#file').click()
        }

        // 图片上传
        $('#file').on('change', function() {
            // console.log(this.files);
            var file = this.files[0]
                // console.log('图片改变了');
                //h5实现文件读取

            //方式1： 通过h5 的filereader 把文件转为base64格式的string对象 
            // let fs = new FileReader()
            // fs.readAsDataURL(file)
            //     // 文件读取完成
            // fs.onload = function() {
            //     // fs.result: 读取的文件内容
            //     socket.emit('sendImg', this.result)
            //         // console.log(this.result);
            // }

            //方式2： 通过window.URL.createObjectURL(file) 把文件转换为blob对象，
            socket.emit('sendImg', window.URL.createObjectURL(file));


            // 如何重置文件域: 1.通过重置表单域，2.通过重置this.value
            // $('#fileForm')[0].reset()
            this.value = ''


        })

        // 初始化qq表情
        $('#face').on('click', function() {
            $("#inputVal").emoji({
                button: "#face",
                showTab: true,
                animation: 'slide',
                position: 'topRight',
                icons: [{
                    name: "QQ表情",
                    path: "./jquery-emoji/src/img/qq/",
                    maxNum: 91,
                    excludeNums: [41, 45, 54],
                    file: ".gif"
                }, {
                    name: "emoji",
                    path: "./jquery-emoji/src/img/emoji/",
                    maxNum: 84,
                    file: ".png"
                }, {
                    name: "贴吧表情",
                    path: "./jquery-emoji/src/img/tieba/",
                    maxNum: 50,
                    file: ".jpg"
                }]
            });
        })
    </script>
</body>

</html>